<template>
	<view class="pb-30" v-if="data&&data.id">
		<image class="fixed top-0 index--1" style="width: 750rpx; height: 634rpx" src="/static/page-bg.png"></image>
		<uv-navbar :fixed="false" bgColor="transparent">
			<view slot="left">
				<nav-left></nav-left>
			</view>
		</uv-navbar>

		<!-- 状态和按钮 -->
		<view class="status-and-button mt-20 flex">
			<view class="flex-1 color-primary">
				<view class="fs-34 fw-700">{{getSname(data.status)}}</view>
				<view class="fs-24" style="margin-top: 18rpx" v-if="data.status != '40'">订单{{getSname(data.status)}}！</view>
				<block v-else>
					<view class="fs-24" style="margin-top: 18rpx" v-if="data.stepStatus1 == 1 && data.stepStatus2 == 0">订单工序1.型材切割已完成！</view>
					<view class="fs-24" style="margin-top: 18rpx" v-if="data.stepStatus2 == 1 && data.stepStatus3 == 0">订单工序2.百叶制作已完成！</view>
					<view class="fs-24" style="margin-top: 18rpx" v-if="data.stepStatus3 == 1 && data.stepStatus4 == 0">订单工序3.玻璃制作已完成！</view>
					<view class="fs-24" style="margin-top: 18rpx" v-if="data.stepStatus4 == 1 && data.stepStatus5 == 0">订单工序4.成品组装已完成！</view>
					<view class="fs-24" style="margin-top: 18rpx" v-if="data.stepStatus5 == 1">订单工序5.包装检验已完成！</view>
				</block>
				
			</view>
			<!-- 生产 -->
			<!-- <block v-if="type == 1">
				<button v-if="data.status == '30' && data.stepUser1 == staffInfoss.userId && data.stepStatus1 == 0"
					class="header-button mg-0 uv-reset-button color-f radius-10 flex-center-center fs-26"
					@click.stop="over2(id)">完成</button>
				<button
					v-if="data.status == '40' && ((data.stepUser2 == staffInfos.userId && data.stepStatus2 == 0) || (data.stepUser3 == staffInfos.userId && data.stepStatus3 == 0 && data.stepStatus1 == 1 && data.stepStatus2 == 1) || (data.stepUser4 == staffInfos.userId && data.stepStatus4 == 0 && data.stepStatus1 == 1 && data.stepStatus2 == 1 && data.stepStatus3 == 1 ) || (data.stepUser5 == staffInfos.userId && data.stepStatus5 == 0 && data.stepStatus1 == 1 && data.stepStatus2 == 1 && data.stepStatus3 == 1 && data.stepStatus4 == 1))"
					class="header-button mg-0 uv-reset-button color-f radius-10 flex-center-center fs-26"
					@click.stop="over2(id)">完成</button>
			</block> -->
			<block v-if="type == 1">
				<button v-if="data.status == '30' && (data.stepUser1 == staffInfos.userId ||data.stepUser2 == staffInfos.userId ||data.stepUser3 == staffInfos.userId ||data.stepUser4 == staffInfos.userId ||data.stepUser5 == staffInfos.userId) "
					class="header-button mg-0 uv-reset-button color-f radius-10 flex-center-center fs-26"
					@click.stop="over2(id)">完成</button>
				<button
					v-if="data.status == '40' && ((data.stepUser2 == staffInfos.userId && data.stepStatus2 == 0) || (data.stepUser3 == staffInfos.userId && data.stepStatus3 == 0) || (data.stepUser4 == staffInfos.userId && data.stepStatus4 == 0 ) || (data.stepUser5 == staffInfos.userId && data.stepStatus5 == 0 ))"
					class="header-button mg-0 uv-reset-button color-f radius-10 flex-center-center fs-26"
					@click.stop="over2(id)">完成</button>
			</block>
			<!-- 物流 -->
			<!-- 待确认10 待排产20 待生产30 生产中40 待发货50 待收货61 待取货62 已收货71 已取货72 已完成90 -->
			<block v-if="type == 2">
				<button v-if="data.status == '50'" class="header-button mg-0 uv-reset-button color-f radius-10 flex-center-center fs-26" @click="send">确认发货</button>
				<!-- <button v-if="data.status == '61'" class="header-button mg-0 uv-reset-button color-f radius-10 flex-center-center fs-26" @click="deliveryFinish">确认收货</button>
				<button v-if="data.status == '62'" class="header-button mg-0 uv-reset-button color-f radius-10 flex-center-center fs-26" @click="deliveryFinish">确认取货</button> -->
				<!-- <button v-if="data.status == '71' || data.status == '72'" class="header-button mg-0 uv-reset-button color-f radius-10 flex-center-center fs-26" @click="finish">订单完成</button> -->
				
				<button  v-if="data.status == '61' ||data.status == '62'" class="ml20  header-button mg-0 uv-reset-button color-f radius-10 flex-center-center fs-26" @click="finish">确认收货</button>
				
				<button  v-if="data.status == '62' ||data.status == '61'|| data.status == '71' ||data.status == '72' ||data.status == '90' " class="ml20  header-button mg-0 uv-reset-button color-f radius-10 flex-center-center fs-26" @click="pageTo(`/pages/logistics?id=${id}`)">查看物流</button>
				
				
				
				
			</block>
			<!-- 客户 -->
			<block v-if="type == 3">
				<button  v-if="data.deliveryMode == 1 && (data.status == '62' || data.status == '61'|| data.status == '71' ||data.status == '72' ||data.status == '90')" class="ml20  header-button mg-0 uv-reset-button color-f radius-10 flex-center-center fs-26" @click="pageTo(`/pages/logistics?id=${id}`)">查看物流</button>
				<button  v-if="data.status == '40'" class="ml20  header-button mg-0 uv-reset-button color-f radius-10 flex-center-center fs-26" @click="pageTo(`/pages/produce-status?id=${id}`)">生产状态</button>
			</block>
			
			
			<!-- <button class="header-button mg-0 uv-reset-button color-f radius-10 flex-center-center fs-26">确认发货</button> -->
		</view>
		<!-- 客户信息 -->
		<view class="shipping-info module-wrap bg-f radius-10 mx-20" v-show="staffRole != 'shengchan'">
			<view class="module-name fw-700">客户信息</view>
			<view class="shipping-item flex">
				<view class="label">客户名称</view>
				<view class="flex-1">{{data.customerName}}</view>
			</view>
			<view class="shipping-item flex">
				<view class="label">联 系 人</view>
				<view class="flex-1">
					{{data.customerPerson}}
				</view>
			</view>
			<view class="shipping-item flex">
				<view class="label">联系电话</view>
				<view class="flex-1">{{data.customerPhone}}</view>
			</view>
			<view class="shipping-item flex">
				<view class="label">省 市 区</view>
				<view class="flex-1">{{data.customerProvince}} {{data.customerCity}} {{data.customerCounty}}</view>
			</view>
			<view class="shipping-item flex">
				<view class="label">联系地址</view>
				<view class="flex-1">{{data.customerAddress}}</view>
			</view>
		</view>
		<!-- 配送信息 -->
		<view class="shipping-info module-wrap bg-f radius-10 mx-20">
			<view class="module-name fw-700">配送信息</view>
			<view class="" v-show="staffRole != 'shengchan'">
				<view class="shipping-item flex">
					<view class="label">配送方式</view>
					<view class="flex-1">{{data.deliveryMode == 1?'物流发货':'自提'}}</view>
				</view>
				<view class="shipping-item flex">
					<view class="label">收 货 人</view>
					<view class="flex-1">
						<text>{{data.deliveryPerson}}</text>
						<text class="ml-20">{{data.deliveryPhone}}</text>
					</view>
				</view>
				<view class="shipping-item flex">
					<view class="label">收货地址</view>
					<view class="flex-1">
						{{data.deliveryProvince}}{{data.deliveryCity}}{{data.deliveryCounty}}{{data.deliveryAddress}}
					</view>
				</view>
				
				<view class="shipping-item flex">
					<view class="label">运输要求</view>
					<view class="flex-1">
						{{data.deliveryAsk ?data.deliveryAsk : ''}}
					</view>
				</view>
				<view class="shipping-item flex">
					<view class="label">发货备注</view>
					<view class="flex-1">
						{{data.deliveryRemark ?data.deliveryRemark : ''}}
					</view>
				</view>
				<view class="shipping-item flex" v-if="data.orderImgs">
					<view class="label">订单图片</view>
					<view class="flex-1 imgs">
						<image :src="item" mode="aspectFill" v-for="(item,index) in data.orderImgs.split(',')" :key="index" @click="pimg(index)"></image>
					</view>
				</view>
			</view>
		

			<view class="shipping-item flex" v-if="data.deliveryMode == 1 && data.status == '62' ||data.status == '61'|| data.status == '71' ||data.status == '72' ||data.status == '90'">
				<view class="label">快递公司</view>
				<view class="flex-1">{{data.deliveryName}}</view>
			</view>
			<view class="shipping-item flex" v-if="data.deliveryMode == 1 && data.status == '62' ||data.status == '61'|| data.status == '71' ||data.status == '72' ||data.status == '90'">
				<view class="label">快递单号</view>
				<view class="flex-1">
					{{data.deliveryNumber}}
					
				</view>
			</view>
		</view>

		<!-- 产品信息 -->
		<view class="module-wrap bg-f radius-10 mx-20">
			<view class="module-name fw-700">产品信息</view>

			<view class="product-info bg-f7 radius-10" v-for="(item,index) in productList" :key="index">
				<view class="flex">
					<view class="flex-1 color-3 fw-700 fs-26">{{item.productName}}</view>
					<view class="fs-24">
						<text class="color-a">（</text>
						<text class="color-a">{{item.productCount}}</text>
						<text class="color-a">件）</text>
					</view>
				</view>
				<view v-if="item.show">
					<view class="mt-30 flex">
						<view>客户提供框内尺寸：</view>
						<view class="flex-1">{{item.sizeWidth}}*{{item.sizeHeight}}</view>
					</view>
					<view class="mt-20 flex">
						<view>安装尺寸：</view>
						<view class="flex-1">{{item.sizeWidthWx}}*{{item.sizeHeightWx}}</view>
					</view>
					<view class="mt-20 flex">
						<view>产品件数：</view>
						<view class="flex-1">{{item.productCount}}</view>
					</view>
					<view class="mt-20 flex">
						<view>起订量：</view>
						<view class="flex-1">{{item.areasBoundary}}</view>
					</view>
					<view class="mt-20 flex">
						<view>单件(㎡)：</view>
						<view class="flex-1">{{item.areas}}</view>
					</view>
					<view class="mt-20 flex">
						<view>单价(元/㎡)：</view>
						<view class="flex-1">{{item.price}}</view>
					</view>
					<view class="mt-20 flex">
						<view>小计(㎡)：</view>
						<view class="flex-1">{{(item.areas * item.productCount).toFixed(2)}}</view>
					</view>
					<view class="mt-20 flex">
						<view>小计￥元：</view>
						<view class="flex-1">{{(item.totalAmount * item.productCount).toFixed(2)}}</view>
					</view>
					<!-- <view class="mt-20 flex">
						<view>平方数：</view>
						<view class="flex-1">{{item.areas}}</view>
					</view> -->
					<view class="mt-20 flex">
						<view>外框颜色：</view>
						<view class="flex-1">{{item.color}}</view>
					</view>
					<view class="mt-20 flex">
						<view>叶片颜色：</view>
						<view class="flex-1">{{item.bladeColor}}</view>
					</view>
					<view class="mt-20 flex">
						<view>叶片类型：</view>
						<view class="flex-1">{{item.bladeType}}</view>
					</view>
					<view class="mt-20 flex">
						<view>驱动方式：</view>
						<view class="flex-1">{{item.driveMode}}</view>
					</view>
					<view class="mt-20 flex">
						<view>生产备注：</view>
						<view class="flex-1">{{item.remarkProd?item.remarkProd:''}}</view>
					</view>
					<view class="mt-20 flex">
						<view>玻璃备注：</view>
						<view class="flex-1">{{item.remarkGlass?item.remarkGlass:''}}</view>
					</view>
					<view class="mt-20 flex">
						<view>项目备注：</view>
						<view class="flex-1">{{item.remark?item.remark:''}}</view>
					</view>
				</view>

				<view class="flex-end mt-20">
					<view class="flex--center" @click="changeShow(item,index)">
						<!-- 加 open 类名箭头向下 -->
						<image class="open-icon" style="width: 30rpx; height: 30rpx" src="/static/open2.png" v-if="item.show"></image>
						<image class="open-icon" style="width: 30rpx; height: 30rpx" src="/static/open.png" v-else></image>
						<view class="color-primary fs-22">{{item.show?'关闭':'展开'}}</view>
					</view>
				</view>
			</view>

		</view>

		<!-- 订单信息 -->
		<view class="module-wrap bg-f radius-10 mx-20">
			<view class="module-name fw-700">订单信息</view>

			<view class="flex-between">
				<view>所属客服</view>
				<view>
					<text>{{data.createUserName}}</text>

				</view>
			</view>
			<!-- <view class="mt-25 flex-between">
				<view>生产小组</view>
				<view>
					<text>{{data.groupName||'-'}}</text>
				</view>
			</view> -->
			<view class="mt-25 flex-between">
				<view>订单编号</view>
				<view>
					<text>{{data.orderNumber}}</text>

				</view>
			</view>
			<view class="mt-25 flex-between">
				<view>创建时间</view>
				<view>
					<text>{{data.createTime}}</text>
				</view>
			</view>
		</view>

		<!-- 订单备注 -->
		<view class="module-wrap bg-f radius-10 mx-20">
			<view class="module-name fw-700">订单备注</view>

			<view-content :content="data.remark"></view-content>
		</view>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog :type="msgType"cancelText="取消" confirmText="确认" title="提示" content="该订单还有款项未支付，是否确认发货？"
				@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>

		<confirm-popup v-if="show2" :orderData="data" @childEvent="childEvent" @childEventClose="childEventClose"></confirm-popup>
		<shipment-popup v-if="show" :orderId="id" @childEventb="childEventb" @childEventbClose="childEventbClose"></shipment-popup>
	</view>
</template>

<script>
	import confirmPopup from '@/components/confirm-popup/confirm-popup.vue'
	
	export default {
		components: {
			confirmPopup
		},
		data() {
			return {
				show2:false,
				show:false,
				ss: [{
					v: "10",
					n: "待确认"
				}, {
					v: "20",
					n: "待排产"
				}, {
					v: "30",
					n: "待生产"
				}, {
					v: "40",
					n: "生产中"
				}, {
					v: "50",
					n: "待发货"
				}, {
					v: "61",
					n: "待收货"
				}, {
					v: "62",
					n: "待取货"
				}, {
					v: "71",
					n: "已收货"
				}, {
					v: "72",
					n: "已取货"
				}, {
					v: "90",
					n: "已完成"
				}], //<!-- 待确认10 待排产20 待生产30 生产中40 待发货50 待收货61 待取货62 已收货 71已取货72 已完成90 -->
				id: "",
				data: {},
				productList: [],
				staffInfos: {
					userId: ''
				},
				type:''
			}
		},
		onLoad(o) {
			this.staffInfos = uni.getStorageSync('staffInfo') || {}
			this.id = o.id
			this.type = o.type
			this.getOrderData()
		},
		computed: {
			staffRole(){
				return this.$store.state.staffRole
			},
			getSname() {
				return (ss) => {
					let index = this.ss.findIndex(item => item.v == ss)
					return index == -1 ? '' : this.ss[index].n
				}
			},
			getAreas() {
				return (data) => {
					let a = parseInt(data.sizeWidthWx) * parseInt(data.sizeHeightWx)
					if (a > data.areasBoundary * 1000000) {
						return parseFloat(a / 1000000).toFixed(2)
					} else {
						return data.areasBoundary
					}
				}
			}
		},
		methods: {
			pimg(index){
				uni.previewImage({
					urls:this.data.orderImgs.split(','),
					current:index
					
				})
			},
			childEventbClose(){
				this.show = false
			},
			childEventClose() {
				this.show2 = false
			},
			childEventb(){
				this.show = false
				this.getOrderData()
			},
			pageTo(url){
				uni.navigateTo({
					url:url
				})
			},
			finish(){
				uni.showModal({
					title: '温馨提示',
					content: '确认收货吗?',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定');
							this.$api.deliveryOrderFinish({
								id: this.id
							}).then(res => {
								uni.showToast({
									title: '操作成功',
									icon: 'none'
								})
								this.getOrderData()
							})
				
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			deliveryFinish(){
				uni.showModal({
					title: '温馨提示',
					content: '确认收货/取货吗?',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定');
							this.$api.deliveryOrderFinish({
								id: this.id
							}).then(res => {
								uni.showToast({
									title: '操作成功',
									icon: 'none'
								})
								this.getOrderData()
							})
				
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			send(){
				//amountReceipts 实际收入 
				if(this.data.amountReceipts<this.data.amountReceivable){
					this.$refs.alertDialog.open()
				}else{
					this.show = true
				}
			},
			dialogConfirm(){
				this.show = true
			},
			dialogClose(){
				this.$refs.alertDialog.close()
			},
			changeShow(item,index){
				item.show = !item.show
				this.$forceUpdate()
			},
			over2(){
				this.show2 = true
				// this.getOrderData()
			},
			childEvent(e) {
				this.show2 = false
				this.getOrderData()
				
			},
			over(id) {
				uni.showModal({
					title: '温馨提示',
					content: '确认完成吗?',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定');
							this.$api.makeOrder({
								id: id
							}).then(res => {
								uni.showToast({
									title: '操作成功',
									icon: 'none'
								})
								this.getOrderData()
							})

						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			async getOrderData() {
				const result = await this.$api.getOrderData({
					id: this.id
				})
				if (result) {
					this.data = result.data
					console.log(result)
					this.productList = result.data.productList
					this.productList.forEach((item,index) => item.show = index == 0)
				}

			},
		},
	}
</script>

<style lang="scss" scoped>
	.imgs{
		display: flex;align-items: center;flex-wrap: wrap;
		image{
			width: 80rpx;height: 80rpx;margin: 0 20rpx 20rpx 0;
			border: 2rpx solid #eee;border-radius: 6rpx;
		}
	}
	.ml20{
		margin-left: 20rpx;
	}
	.status-and-button {
		margin: 20rpx 27rpx 0 30rpx;
	}

	.header-button {
		width: 175rpx;
		height: 60rpx;
		background: #ff4c2a;
	}

	// 配送信息
	.shipping-info {
		margin-top: 35rpx;
	}

	.shipping-item {
		font-size: 26rpx;
		color: #434343;

		.label {
			width: 134rpx;
		}
	}

	.shipping-item+.shipping-item {
		margin-top: 23rpx;
	}

	.module-wrap {
		padding: 24rpx 17rpx 30rpx;

		&+.module-wrap {
			margin-top: 18rpx;
		}

		.module-name {
			margin-bottom: 28rpx;
		}
	}

	.product-info {
		padding: 22rpx 17rpx 18rpx;
		color: #969696;
		font-size: 24rpx;

		&+.product-info {
			margin-top: 8rpx;
		}
	}

	.open-icon {
		&.open {
			transform: rotate(90deg);
		}
	}
</style>